@import "../color";

.body-page {
  width: 100vw;
  height: 478px;


  .body-box{
    width: 100%;
    height: 100%;
    position: relative;

    .img{
      width: 100%;
      height: 100%;
    }

    .img-opacity{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(31,56,88,0.40);
      z-index: 1;
    }
    .mid-box{
      position: absolute;
      height: 478px;
      width: 1000px;
      top:0;
      left:50%;
      margin-left:-500px;
      z-index: 2;
      .float-mid{
        width: 490px;
        height: 296px;
        position: absolute;
        left: 50%;
        margin-left: -245px;
        margin-top: -120px;
        top:42%;

        .float-box{
          width: 490px;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .mid-title{
            font-size: 54px;
            color: #fff;
            line-height: 56px;
            font-family: Rufina-Bold,sans-serif;
            font-weight: 400;
          }
          .mid-china{
            font-size: 34px;
            color: #fff;
            margin-bottom: 38px;
            line-height: 48px;
            font-family: Rufina-Bold,sans-serif;
            font-weight: 200;
          }
          .input-box{
            width: 100%;
            height: 60px;
            background: #fff;
            opacity: 0.1;
            position: absolute;
            bottom:46px;


          }

          .input-check{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .input{
              width: 368px;
              height: 45px;
              background: #fff;
              margin-left: 10px;
              box-sizing: border-box;
              border-radius: 3px;
              z-index: 4;
              font-size: 14px;
              color: rgba(31,56,88,0.30);
              line-height: 20px;
            }
            .search-button{
              width: 94px;
              height: 45px;
              border-radius: 10px;
              background: #F37327;
              line-height: 45px;
              text-align: center;
              color: #fff;
              font-size: 14px;
              margin-right: 6px;
              font-family: PingFangSC-Regular,sans-serif;
            }
          }

          .hot-txt{
            margin-top: 10px;
            width: 490px;
            padding: 10px 0;
            height: 38px;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            display: flex;


            .hot-title{
              color: rgba(255,255,255,0.80);
              font-size: 12px;
              margin-left: 16px;
              font-weight: 400;
            }

            .hot-detail{
              color: rgba(255,255,255,0.80);
              font-weight: 400;
              margin-right: 10px;
            }

           .hot-detail:hover{
             color: #F37327;
             font-weight: 400;
             margin-right: 10px;
           }
          }

        }
      }
    }
  }


}
